<template>
	<view class="flex flex-between">
		<tm-grid-item @click="gotoList(itemData[0].url)" :height="itemHeight" :count="itemData[0].count">
			<tm-icon :name='itemData[0].icon' :font-size="iconSize" color="#ff475f" class="py-20"></tm-icon>
			<tm-text _class="pt_10" :font-size="itemFontSize" :label="itemData[0].label"></tm-text>
		</tm-grid-item>
		<tm-grid-item @click="gotoList(itemData[1].url)" :height="itemHeight">
			<tm-icon :name='itemData[0].icon' :font-size="iconSize" color="#63BFEE" class="py-20"></tm-icon>
			<tm-text _class="pt_10" :font-size="itemFontSize" :label="itemData[1].label"></tm-text>
		</tm-grid-item>
		<tm-grid-item @click="gotoList(itemData[2].url)" :height="itemHeight">
			<tm-icon :name='itemData[0].icon' :font-size="iconSize" color="#19c277" class="py-20"></tm-icon>
			<tm-text _class="pt_10" :font-size="itemFontSize" :label="itemData[2].label"></tm-text>
		</tm-grid-item>
	</view>
</template>

<script setup lang='ts'>
	defineProps({
		itemData:{
			type:Object,
			require:true
		}
	})
	
	const itemHeight = 175
	const itemFontSize = 29
	const iconSize = 49
	
	
	const gotoList = (url: string) => {
		uni.navigateTo({
			url:url,
		});
	}
</script>

<style>

</style>
